<template>
  <div class="college-container">
    <!-- 数据统计卡片区域 -->
    <el-row :gutter="20" class="data-overview">
      <!-- 学院总数卡片 -->
      <el-col :span="8">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <el-icon>
                <School />
              </el-icon>
              <span>学院总数</span>
            </div>
          </template>
          <div class="card-number">{{ collegeList.length }}</div>
        </el-card>
      </el-col>

      <!-- 安徽理工大学 Logo -->
      <el-col :span="8">
        <el-card class="logo-card">
          <div class="logo-container">
            <img src="@/assets/image.png" alt="安徽理工大学" class="aust-logo">
            <h2 class="school-name">安徽理工大学</h2>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 表格区域 -->
    <el-card class="table-card">
      <div class="table-header">
        <el-button type="primary" :icon="Plus" class="add-button" @click="dialogVisible = true">
          添加学院
        </el-button>
      </div>
      <el-table :data="collegeList" style="width: 100%" :header-cell-style="{ background: '#f5f7fa' }"
        v-loading="loading" stripe border highlight-current-row>
        <el-table-column type="index" label="#" width="60" align="center" />
        <el-table-column prop="name" label="学院名称" align="center">
          <template #default="{ row }">
            <el-tag :type="getRandomType()">{{ row.name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="college_id" label="学院代码" align="center" />
        <el-table-column prop="create_time" label="专业列表" align="center">
          <template #default="{ row }">
            <el-tag class="ml-2" :type="getRandomType()" v-for="(item, index) in row.majors" :key="index">{{ item
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="{ }">
            <el-button-group>
              <el-button type="primary" disabled :icon="Edit" size="small">编辑</el-button>
              <el-button type="danger" disabled :icon="Delete" size="small">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-card>


    <el-dialog v-model="dialogVisible" title="添加学院" width="40%" center destroy-on-close class="college-dialog">
      <el-form ref="formRef" :model="collegeForm" :rules="rules" label-width="100px" class="college-form">
        <el-form-item label="学院名称" prop="name">
          <el-input v-model="collegeForm.name" placeholder="请输入学院名称">
            <template #prefix>
              <el-icon>
                <School />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="学院代码" prop="college_id">
          <el-input v-model="collegeForm.college_id" placeholder="请输入学院代码">
            <template #prefix>
              <el-icon>
                <Document />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="专业列表" prop="majors">
          <el-tag v-for="(major, index) in collegeForm.majors" :key="index" closable :type="getRandomType()"
            class="major-tag" @close="handleClose(index)">
            {{ major }}
          </el-tag>
          <el-input v-if="inputVisible" ref="inputRef" v-model="inputValue" class="major-input"
            @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
          <el-button v-else class="add-major-button" @click="showInput">
            <el-icon>
              <Plus />
            </el-icon>
            添加专业
          </el-button>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
            确 定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { getCollegeListAPI } from '@/api/college.js'
import { School, Edit, Delete, Plus, Document } from '@element-plus/icons-vue'
import { addCollegeAPI } from '@/api/college.js'

const collegeList = ref([])
const loading = ref(true)
const dialogVisible = ref(false)
const collegeForm = ref({
  name: '',
  college_id: '',
  majors: []
})
const inputVisible = ref(false)
const inputValue = ref('')
const submitLoading = ref(false)
const formRef = ref(null)
const inputRef = ref(null) // 确保在顶部声明了这个 ref

const rules = {
  name: [
    { required: true, message: '请输入学院名称', trigger: 'blur' }
  ],
  college_id: [
    { required: true, message: '请输入学院代码', trigger: 'blur' }
  ],
  majors: [
    { required: true, message: '请添加至少一个专业', trigger: 'blur' }
  ]
}

// 获取随机标签类型
const getRandomType = () => {
  const types = ['', 'success', 'warning', 'info', 'danger']
  return types[Math.floor(Math.random() * types.length)]
}

// 获取学院列表
const getCollegeList = async () => {
  loading.value = true
  const { data: res } = await getCollegeListAPI()
  if (res.status !== 0) {
    // eslint-disable-next-line no-undef
    ElMessage.error('获取学院列表失败')
    return
  }

  collegeList.value = res.data
  // eslint-disable-next-line no-undef
  ElMessage.success('获取学院列表成功')
  loading.value = false
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    inputRef.value?.focus() // 使用可选链操作符
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    collegeForm.value.majors.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}

const handleClose = (index) => {
  collegeForm.value.majors.splice(index, 1)
}

const handleSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      submitLoading.value = true
      // // 模拟提交数据
      // setTimeout(() => {
      //   // eslint-disable-next-line no-undef
      //   ElMessage.success('添加学院成功')
      //   dialogVisible.value = false
      //   submitLoading.value = false
      // }, 1000)
      const { data: res } = await addCollegeAPI(collegeForm.value)
      console.log(res);
      if (res.status !== 0) {
        // eslint-disable-next-line no-undef
        ElMessage.error('添加学院失败')
        submitLoading.value = false
        return
      }
      // eslint-disable-next-line no-undef
      ElMessage.success('添加学院成功')
      dialogVisible.value = false
      submitLoading.value = false
      collegeForm.value = {
        name: '',
        college_id: '',
        majors: []
      }
      getCollegeList()



    }
  })
}

onMounted(() => {
  getCollegeList()
})
</script>

<style scoped>
.college-container {
  padding: 20px;
}

.data-overview {
  margin-bottom: 20px;
}

.stat-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(102, 126, 234, 0.2);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(45deg);
  animation: shine 3s infinite;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 15px;
}

.card-header span {
  color: white;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.card-header .el-icon {
  font-size: 24px;
  color: white;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px;
  border-radius: 12px;
}

.card-number {
  font-size: 36px;
  font-weight: bold;
  color: white;
  text-align: center;
  padding: 20px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

@keyframes shine {
  0% {
    transform: rotate(45deg) translate(-150%, -150%);
  }

  100% {
    transform: rotate(45deg) translate(150%, 150%);
  }
}

/* 添加卡片内容的动画效果 */
.stat-card:hover .card-number {
  animation: pulse 1s ease-in-out;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.table-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table__header) {
  background-color: #f5f7fa;
}

:deep(.el-table__row) {
  transition: all 0.3s;
}

:deep(.el-table__row:hover) {
  background-color: #f5f7fa;
  transform: translateY(-2px);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.el-button-group {
  display: flex;
  gap: 8px;
}

.ml-2 {
  margin: 4px;
  padding: 0 12px;
  height: 26px;
  line-height: 26px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s;
}

.ml-2:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 为不同类型的标签添加渐变色背景 */
.el-tag.el-tag--success {
  background: linear-gradient(45deg, #67C23A, #85CE61);
  border: none;
}

.el-tag.el-tag--warning {
  background: linear-gradient(45deg, #E6A23C, #F0C78A);
  border: none;
}

.el-tag.el-tag--info {
  background: linear-gradient(45deg, #909399, #C8C9CC);
  border: none;
}

.el-tag.el-tag--danger {
  background: linear-gradient(45deg, #F56C6C, #F89898);
  border: none;
}

:deep(.el-tag--success),
:deep(.el-tag--warning),
:deep(.el-tag--info),
:deep(.el-tag--danger) {
  color: white !important;
}

.logo-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
  /* 添加这行 */
  display: flex;
  /* 添加这行 */
  align-items: center;
  /* 添加这行 */
  justify-content: center;
  /* 添加这行 */
}

.logo-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(45deg);
  animation: shine 3s infinite;
  z-index: 1;
  /* 添加这行 */
}

.logo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(102, 126, 234, 0.2);
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  gap: 15px;
  position: relative;
  z-index: 1;
  height: 100%;
  /* 添加高度 */
}

.aust-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

/* 修改悬浮效果 */
.logo-card:hover .aust-logo {
  transform: scale(1.1);
}

.school-name {
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  letter-spacing: 2px;
  position: relative;
  /* 添加这行 */
  z-index: 2;
  /* 添加这行 */
}

/* 移除之前的一些动画效果，保持风格统一 */
.logo-card::after {
  display: none;
}

/* 添加与学院总数卡片相同的脉冲动画 */
.logo-card:hover .school-name {
  animation: pulse 1s ease-in-out;
}

/* 确保两个卡片使用相同的动画 */
@keyframes shine {
  0% {
    transform: rotate(45deg) translate(-150%, -150%);
  }

  100% {
    transform: rotate(45deg) translate(150%, 150%);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

/* 添加按钮样式 */
.table-header {
  margin-bottom: 20px;
}

.add-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  padding: 12px 25px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.add-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

.add-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent);
  transition: 0.5s;
}

.add-button:hover::before {
  left: 100%;
}

/* 对话框样式 */
.college-dialog :deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  background: linear-gradient(135deg, #f6f8ff 0%, #f0f3ff 100%);
}

.college-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  margin: 0;
}

.college-dialog :deep(.el-dialog__title) {
  color: white;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
}

.college-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
  color: white;
  font-size: 20px;
  transition: all 0.3s;
}

.college-dialog :deep(.el-dialog__headerbtn:hover .el-dialog__close) {
  transform: rotate(180deg);
}

.college-form {
  padding: 30px 20px;
}

/* 表单项样式 */
.college-form :deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
  border-radius: 8px;
  transition: all 0.3s;
}

.college-form :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #764ba2 inset;
}

.college-form :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px #667eea inset;
}

.college-form :deep(.el-input__prefix-inner) {
  color: #764ba2;
}

/* 专业标签样式 */
.major-tag {
  margin: 0 8px 8px 0;
  transition: all 0.3s;
}

.major-input {
  width: 120px;
  margin-left: 8px;
  vertical-align: bottom;
}

.add-major-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 8px 16px;
  transition: all 0.3s;
}

.add-major-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
}

/* 对话框底部按钮样式 */
.dialog-footer {
  padding: 20px;
  text-align: right;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
}

.dialog-footer .el-button {
  padding: 12px 24px;
  font-weight: 500;
  transition: all 0.3s;
}

.dialog-footer .el-button--primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.dialog-footer .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
}
</style>
